<template>
	<view class="sbody">
		<view class="authBody">
			<uni-forms class="register-input" ref="formData" :value="formData" :rules="rules">
				<view class="register-input">
					<view class="register-input-icon"><span class="iconfont authFont">&#xe6c9;</span></view>
					<view class="register-input-line">
						<uni-forms-item name="person">
							<input-autocomplete :value="formData.person" v-model="formData.person"
								placeholder="请输入被访问公司" :loadData="loadAutocompleteData" v-on:selectItem="selectItemD"
								class="register_input_autocomplete">
							</input-autocomplete>
						</uni-forms-item>
					</view>
				<text class="register-error-text" v-if="formData.personError">请选择正确的公司</text>
				</view>
				<view class="register-input">
					<view class="register-input-icon"><span class="iconfont authFont">&#xe696;</span></view>
					<view class="register-input-line">
						<uni-forms-item name="phone">
							<input v-model="formData.phone" placeholder="请填写被访问手机号"
								class="register-input-value" @blur="doInputPhone(formData.phone)" />
						</uni-forms-item>
					</view>
					<text class="register-error-text" v-if="formData.phonePatternError">请输入正确的手机</text>
				</view>
				<view class="register-input">
					<view class="register-input-icon"><span class="iconfont authFont">&#xe652;</span></view>
					<view class="register-input-line">
						<uni-forms-item name="name">
							<input v-model="formData.name" placeholder="请输入您的姓名" class="register-input-value" @blur="doInputName(formData.name)"/>
						</uni-forms-item>
					</view>
				<text class="register-error-text" v-if="formData.namePatternError">请输入姓名</text>
				</view>
				<view class="register-input">
					<view class="register-input-icon"><span class="iconfont authFont">&#xe6c8;</span></view>
					<view class="register-input-line">
						<uni-forms-item name="idCard">
							<input v-model="formData.idCard" placeholder="请输入您的身份证号" class="register-input-value" @blur="doInputCard(formData.idCard)"/>
						</uni-forms-item>
					</view>
					<text class="register-error-text" v-if="formData.idCardPatternError">请输入正确的身份证</text>
				</view>
				<view class="register-input">
					<view class="register-input-icon"><span class="iconfont authFont">&#xe615;</span></view>
					<view class="register-input-time">
						<view class="input-time-item">
							<uni-forms-item name="date">
								<hTimePicker :sTime="9"  :cTime="18"
									interval="30" sDay="0" dayNum='7' @changeTime="bindDateChange">
									<view slot="pCon" class="changeTime">
										<view class="register-input-value" v-if="formData.date!=undefined">
											{{formData.date}}
										</view>
										<view class="register-input-value" style="color: grey;" v-else>
											选择预约时间
										</view>
									</view>
								</hTimePicker>
							</uni-forms-item>
						</view>
					</view>
					<text class="register-error-text" v-if="formData.timeNullError">时间不能为空</text>
				</view>
				<view class="register-remark">
					<textarea v-model="formData.matter" class="register-input-textarea"
						placeholder="请填写访问事由"></textarea>
				</view>
				<button @click="formSubmit" form-type="submit" class="rButton">提交登记</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import inputAutocomplete from '@/components/input-autocomplete/input-autocomplete.vue';
	import hTimePicker from '@/components/h-timePicker/h-timePicker.vue';
	import {
		listCompany
	} from '@/common/js/api/company.js';
	import {
		addVisitorRecord
	} from '@/common/js/api/visitRecord.js';
	import parseTime from '@/common/js/utils/project.js'

	export default {
		components: {
			inputAutocomplete,
			hTimePicker
		},
		data() {
			return {
				index: 0,
				//被访问公司对象名称数组
				companyList: [],
				rightClick: false,
				userInfo: [],
				//限制重复提交
				changeClick: true,
				//检验是否为选择的公司
				compName:"",
				//表单数据
				formData: {
					//结束时间
					endDate: '',
					//开始时间
					startDate: '',
					date: undefined,
					time: undefined,
					//姓名
					name: '',
					//手机号码
					phone: '',
					//身份证
					idCard: '',
					//访问事由
					matter: '',
					//时间空校验
					timeNullError: false,
					//名称校验
					namePatternError: false,
					//身份证格式校验
					idCardPatternError: false,
					//手机号码格式校验
					phonePatternError: false,
					//被访问对象校验
					personError: false,
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入访客姓名',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^[\u4E00-\u9FA5A-Za-z]+$/
								if (!iphoneReg.test(value)) {
									callback('姓名格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: ' ',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: ' ',
						}]
					},
				},
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo);
		},
		methods: {
			//获取选择的时间
			bindDateChange(e) {
				this.formData.date = e
				this.formData.timeNullError = false
			},
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				return y + '/' + MM + '/' + d + ' ' + h + ':' + m; //年月日时分秒

			},
			// //计算半小时后的时间
			getDateDiff() {
				let date = this.formData.date;
				date = new Date(date.replace(/\-/g, '/')).getTime()
				date = date + 1800 * 1000
				this.formData.endDate = this.Base.dateFormat("yyyy-MM-dd hh:mm:ss", date)
			},
			//在这里可动态加载提示数据，input-autocomplete有做防抖处理（需设置debounce属性）
			loadAutocompleteData(value) {
				// 【注意】：由于此方法是组件调用进来的，这里的this对象已经不是指向当前页面了
				// 所以无法在这里通过this去取当前页面的数据；
				// 基于同样的原因，也无法通过this去调用当前页的其它方法。
				// 【正确的做法】：在这个方法内写完所有取数据的逻辑，如果需要用输入框的值则取这里的value参数
				//可以通过$root拿到当前页面的引用，从而访问当前页面的数据
				let that = this.$root;
				var query = that.formData.person;
				var list = [];
				listCompany(query).then(res => {
					list = res.rows;
					for (var i = 0; i < list.length; i++) {
						that.companyList[i] = list[i].compName
					}

				})
				return Promise.resolve(that.companyList)
			},
			//响应选择事件，接收选中的数据
			selectItemD(data) {
				this.compName = data
				this.formData.personError = false
				console.log("接收到数据：" + data)
			},
			//姓名校验
			doInputName(val) {
				console.log(val);
				var regName = (/^[\u4E00-\u9FA5A-Za-z]+$/);
				//手机号码
				if (!regName.test(this.formData.name)) {
					this.formData.namePatternError = true
					return;
				} else {
					this.formData.namePatternError = false
				}
			},
			//手机校验
			doInputPhone(val) {
				console.log(val);
				var regPhone = (/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/);
				//手机号码
				if (!regPhone.test(this.formData.phone)) {
					this.formData.phonePatternError = true
					this.rules.phone.rules.errorMessage = "请输入正确的手机号码"
					return;
				} else {
					this.formData.phonePatternError = false
				}
			},
			//身份证校验
			doInputCard(val) {
				let regIdCard = (/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/); //身份证号码
				if (!regIdCard.test(this.formData.idCard)) {
					this.formData.idCardPatternError = true
					return;
				} else {
					this.formData.idCardPatternError = false
				}
			},
			//提交
			formSubmit() {
				console.log(this.compName);
				if(this.compName === ""){
					this.formData.personError = true
				}
				this.doInputName(this.formData.name)
				this.doInputPhone(this.formData.phone)
				this.doInputCard(this.formData.idCard)
				if (this.formData.date === undefined) {
					this.formData.timeNullError = true
				}
				if(this.formData.personError || this.formData.timeNullError){
					return
				}
				if (this.changeClick) {
					let params = {}
					this.$refs.formData.submit().then(params => {
						this.changeClick = false
						this.getDateDiff()
						var data = {
							"openId": this.userInfo.openid,
							"visitComp": this.formData.person,
							"visitPhone": this.formData.phone,
							"visitName": this.formData.name,
							"visitCard": this.formData.idCard,
							"visitTime": "",
							"leftTime": "",
							params: {
								"startTime": this.formData.date,
								"endTime": this.formData.endDate
							},
							"visitMatter": this.formData.matter,
						};
						console.log(data);
						addVisitorRecord(data).then(res => {
							this.changeClick = true
							if (res.code == 200) {
								uni.showToast({
									title: '提交成功',
									duration: 2000
								});

								uni.redirectTo({
									url: '../bookingRecord/bookingRecord?name=' + '访客预约记录'
								})
							} else {
								uni.showModal({
									title: '提交失败',
								})
							}
						})

					})
				} else {
					uni.showToast({
						title: "请不要重复提交",
						icon: 'none',
						duration: 2000
					})
				}
			},
		},
	}
</script>
<style lang="scss" scoped>
	.authFont {
		color: #2088ec;
		font-weight: bold;
		font-size: 20px;
	}

	.rButton {
		background-color: #1884eb;
		width: 90%;
		color: #fff;
		margin-top: 8%;
	}

	.register-error-text {
		float: right;
		position: relative;
		top: -26px;
		color: red;
		font-size: 14px;
	}

	.register-error-input {
		border: 1px solid red;
		border-radius: 5px;
		padding: 10px 0 0 10px;
		width: 90%;
		margin: auto;
		padding-bottom: 5px;
		font-size: 12px;
		margin-top: 5px;
	}

	.register-input {
		padding: 10px 0 0 10px;
		width: 90%;
		margin: auto;
		border-bottom: 1px solid #eee;
		padding-bottom: 5px;
		font-size: 12px;
		margin-top: 5px;
	}

	.register-input-line {
		display: inline-block;
		width: calc(100% - 30px);
		margin-left: 8px;
		font-size: 12px;
	}

	.register-input-time {
		display: inline-block;
		width: calc(100% - 30px);
		margin-left: 8px;
		font-size: 12px;
		height: 20px;
	}

	.input-time-item {
		display: flex;
		justify-content: space-between;
		margin-right: 120px;
	}

	.register-input-value {
		position: relative;
		top: -6px;
	}

	.register-input-icon {
		display: inline-block;
		width: 20px;
	}

	.register-remark {
		width: 90%;
		height: 120px;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 25px;
		border-radius: 5px;
	}

	.register-input-textarea {
		height: 100%;
		padding: 15px 0px 0px 15px;
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
	}

	.authBody {
		width: 90%;
		margin: auto;
		height: 90%;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
		//padding-top: 20px;
	}

	.sbody {
		height: 100vh;
		background: url("http://101.206.123.213:7051/static/image/common/pic-background.png");
		background-size: cover;
		/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
		background-repeat: no-repeat;
		background-color: white;
	}
</style>
